<template>
  <div class="x-handle" @mousedown="mouseDown"></div>
</template>

<script>
export default {
  name: "XiaobuDrag",
  data() {
    return {
      lastX: ""
    }
  },

  created() {
    document.addEventListener("mouseup", this.mouseUp)
  },

  destroyed() {
    document.removeEventListener("mouseup", this.mouseUp)
  },

  methods: {
    mouseDown(event) {
      document.addEventListener("mousemove", this.mouseMove)
      this.lastX = event.screenX
    },
    mouseMove(event) {
      this.$emit("widthChange", this.lastX - event.screenX)
      this.lastX = event.screenX
      // console.log(this.lastX, "...", event.screenX);
    },
    mouseUp() {
      this.lastX = ""
      document.removeEventListener("mousemove", this.mouseMove)
    }
  }
}
</script>
<style lang="scss" scoped>
.x-handle {
  width: 5px;
  cursor: w-resize;
  z-index: 10;
  position: absolute;
  height: 100%;
  right: -2px;
  top: 0;
}
</style>